<template>
  <div class='form-item'>
      <!-- 按钮部分 -->
        <el-row class="button">
          <el-button type="success" class="added" size="mini" @click="$router.push('/questions/new')">
            <i class="el-icon-edit"></i>
            新增试题</el-button
          >
        </el-row>
        <!-- 按钮部分 -->
<!-- 表单部分 -->
        <el-row class="formcenter" type="flex"  justify="end">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" label-width="80px" ref="formInline">
            <el-row :gutter="20">
  <el-col :span="6" > <el-form-item label="学科">
    <el-select v-model="formInline.subjectID" placeholder="请选择" @change="hander">
      <el-option v-for="item in subject" :key="item.value" :value="item.value" :label="item.label"></el-option>
    </el-select>
  </el-form-item></el-col>
  <el-col :span="6"> <el-form-item label="二级目录" >
    <el-select v-model="formInline.catalogID" placeholder="请选择" @change="catalogues">
      <el-option v-for="item in catalogue" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item></el-col>
  <el-col :span="6"> <el-form-item label="标签">
    <el-select v-model="formInline.tags" placeholder="请选择">
      <el-option v-for="item in label" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item></el-col>
  <el-col :span="6"> <el-form-item label="关键字">
    <el-input v-model="formInline.keyword" placeholder="根据题干搜索" style="width:202px"></el-input>
  </el-form-item></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="6"><el-form-item label="试题类型">
    <el-select v-model="formInline.questionType" placeholder="请选择">
      <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
</el-col>
  <el-col :span="6"><el-form-item label="难度">
    <el-select v-model="formInline.difficulty" placeholder="请选择">
      <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
</el-col>
  <el-col :span="6"><el-form-item label="方向">
    <el-select v-model="formInline.direction" placeholder="请选择">
      <el-option v-for="(item, index) in directions" :key="index" :label="item" :value="item"></el-option>
    </el-select>
  </el-form-item>
</el-col>
  <el-col :span="6"><el-form-item label="录入人">
    <el-select v-model="formInline.creatorID" placeholder="请选择">
      <el-option v-for="item in creatorID" :key="item.index" :label="item" :value="item.index"></el-option>
    </el-select>
  </el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="6"><el-form-item label="题目备注">
    <el-input v-model="formInline.remarks" style="width:202px"></el-input>
  </el-form-item></el-col>
  <el-col :span="6">
      <el-form-item label="企业简称">
    <el-input v-model="formInline.shortName" style="width:202px"></el-input>
  </el-form-item></el-col>
  <el-col :span="6">
    <el-form-item label="城市">
    <el-select v-model="formInline.province" placeholder="请选择" style="width:99px" @change="changcity">
      <el-option v-for="item in provinces" :key="item.index" :label="item" :value="item"></el-option>
    </el-select> &nbsp;
    <el-select v-model="formInline.city" placeholder="请选择" style="width:99px">
      <el-option v-for="item in citys" :key="item.index" :label="item" :value="item"></el-option>
    </el-select>
  </el-form-item>
  </el-col>
  <el-col :span="6"> <span style="margin-left: 162px"><el-button size="small" @click="resetForm">清除</el-button>
  <el-button type="primary" size="small" @click="btnok">搜索</el-button></span></el-col>
</el-row>
         </el-form>
        </el-row>
        <!-- 表单部分 -->
 </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { simple as directorys } from '@/api/hmmm/directorys.js'
import { simple as tags } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'formItem',
  data () {
    return {
      formInline: {
        subjectID: null,
        //  关键字
        keyword: null,
        //  试题类型
        questionType: null,
        //  难度
        difficulty: null,
        //  方向
        direction: null,
        // 录入人
        creatorID: null,
        catalogID: null,
        tags: null,
        //  题目备注
        remarks: null,
        //  企业简称
        shortName: null,
        //  省份
        province: null,
        //  城市
        city: null
      },
      subject: [],
    //  二级目录
      catalogue: [],
      label: [],
      questionType: questionType,
      difficulty: difficulty,
      directions: direction,
      creatorID: ['超级管理员', '录入管理员'],
      provinces: provinces(),
      citys: ''
    }
  },
  props: {
    type1: {
      type: String,
      default: ''
    }
  },
  components: {

  },
  computed: {

  },
  watch: {

  },
  created () {
      this.simple ()
  },
  mounted () {

  },
  methods: {
     async simple() {
       const { data } =await simple()
      //  console.log(data);
       this.subject = data
      },
     async hander(subjectID){
     const { data } = await  directorys({subjectID})
    //  console.log(data);
    this.catalogue = data
      },
     async catalogues (catalogID) {
        const { data } = await tags ({catalogID})
        this.label = data
      },
      changcity (pname) {
      const res =  citys(pname)
      this.citys = res
      },
      //  重置表单
      resetForm () {
       this.formInline = {
        subjectID: "",
        //  关键字
        keyword: '',
        //  试题类型
        questionType: '',
        //  难度
        difficulty: '',
        //  方向
        direction: '',
        // 录入人
        creatorID: '',
        //  题目备注
        remarks: '',
        //  企业简称
        shortName: '',
        //  省份
        province: '',
        //  城市
        city: '',
        catalogID: '',
        tags: '',
      }
      },
      btnok(){
        // // 搜索按钮
        // if(this.type1 === 'jinxuan') {
        //   console.log(123);

        // } else {
        //   console.log(456);
        // }
        this.$emit('changetext', this.formInline)
      }
  }
}
</script>

<style scoped>
.el-form {
  width: 100%;
}
.button {
  height: 50px;
  position: relative;
}
.added {
  position: absolute;
  right: 9px;
}
.formcenter {
  width: 100%;
  padding-left: 27px;
}
</style>
